<template>
  <div>
    <el-form inline class="demo-form-inline">
      <el-form-item>
        <el-button type="primary" @click="addRole">添加角色</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="list" border style="width: 100%">
      <el-table-column prop="roleId" label="ID" width="180" />
      <el-table-column prop="roleName" label="角色名" width="180" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" link size="small" @click="changeRole(scope.row)">
            修改权限
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { ElMessage, ElMessageBox } from 'element-plus'
import { getRoleList } from '@/request/api';
import { ListInit } from '@/type/role'
import { ref } from 'vue';
import { useRouter } from 'vue-router'
const list = ref<ListInit[]>([]);
const getRole = () => {
  getRoleList().then(res => {
    console.log(res)
    list.value = res.data;
  })
}
const router = useRouter()
const changeRole = (row: ListInit) => {
  console.log(row);
  router.push({
    name: 'authority',
    params: {
      id: row.roleId,
      authority: row.authority
    }
  })
}
const addRole = () => {
  ElMessageBox.prompt('请输入角色名称', '添加', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
  })
    .then(({ value }) => {
      if (value) {
        list.value.push({
          roleId: list.value.length + 1,
          roleName: value,
          authority: []
        })
      }
      ElMessage({
        type: 'success',
        message: `${value}角色添加成功`,
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消操作',
      })
    })
}
getRole()
</script>

<style scoped>
</style>